<script setup>
import * as THREE from 'three'

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera();
// 调整相机位置
camera.position.z = 10;
camera.position.y = 3

// 创建立方体
const geometry = new THREE.BoxGeometry(2, 2, 2);
// 设置材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建网格
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加网格地面
const gridHelper = new THREE.GridHelper(10,10)
scene.add(gridHelper)

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器添加到网页元素中
const app = document.getElementById('app');
app.appendChild(renderer.domElement);
renderer.render(scene, camera);

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();
</script>
<template>
<div class="">
    
</div>
</template>
<style scoped lang='scss'>
</style>